Create a 3D RPG Game With THREE.js

What you'll learn

• Create 3D games that will run in a browser

• Understand how to control a character allowing the user to guide them around a large environment

• Learn to load complex external 3D assets that contain animations.

• Apply animations to a skinned mesh.

• Use simplified geometry to contain the user character within the environment.

• Introduction 21:11

  • 1: Welcome to the course 01:00
  • 2: What are you going to learn Preview 02:41
  • 3: Setting up a simple web server Preview 02:47
  • 4: 3D Basics Preview 03:58
  • 5: Introducing Three.js Preview 08:45
  • 6: What have you learned? 02:00

• Creating 3D Assets 22:07

  • 7: Finding environment assets to use in your game 03:52
  • 8: Using Mixamo characters and animations 04:10
  • 9: An overview of Blender 03:39
  • 10: 3D formats 07:49
  • 11: Editing your assets 02:37

• Loading Your Assets 18:52

  • 12: Creating a Preloader 06:40
  • 13: The THREE.js Animation system 08:12
  • 14: Using the FBXLoader class 04:00

• Character Animation 14:43

  • 15: Creating an onscreen joystick 07:11
  • 16: Switching animations dynamically 05:32
  • 17: Check your knowledge 02:00

• Moving Around Your Environment 22:33

  • 18: Changing camera angle 06:42
  • 19: Using the Raycaster class to avoid walking through the environment 05:55
  • 20: Loading the environment 02:08
  • 21: Creating a simplified version of your environment 04:48
  • 22: Check your knowledge 03:00

• Interacting with the Environment 17:58

  • 23: Using proximity testing for custom actions 07:46
  • 24: Adding cut scenes 06:26
  • 25: Adding custom animations using a Tween class 03:46

• Adding Sound to Your Game 07:49

  • 26: The SFX class 05:50
  • 27: Adjust volume using proximity 01:59

• Pathfinding 17:00

  • 28: Creating a NavMesh 07:19
  • 29: Using a NavMesh 09:41

• Conclusion 03:21

  • 30: What you've learned 02:40
  • 31: More ideas for THREE.js games 00:41

Creating 3D games is fun. In this course you will learn quickly to create a stunning game. The author has won many awards for his 3D browser based games and he will take you through all the skills you need to create games of your own using the amazing THREE.js library.

THREE.js makes creating WebGL games much easier. You will not need to worry about how to write complex shaders. Instead the shaders will load from the assets you create in Blender.

You’ll learn

• To setup your development environment .

• How to export 3D assets from Blender, including animation.

• Where to source great 3D assets that you can use in your own games.

• The basics of setting up a THREE.js camera, scene and renderer.

• Adding a pre-loader.

• Using the FBXLoader class.

• To master the art of blending animations.

• Use a custom onscreen JoyStick class you can easily add to your own games so that desktop and mobile users get the same experience.

• How to smoothly switch camera angles.

• How to use simplified geometry to lock your character to the environment.

• How to add cut-scenes.

• How to add Sound to your games that responds to the current camera location.

It is exciting and fun and in around 2 hours you will have acquired the skills to create your own games.

Student reviews:

"This course is really awesome ! I enjoyed every second of this learning experience. Thanks to Nicholas Lever ( all the respects ) I can't wait for the next course using cannon.js !"

"This is the most exciting class I've taken since joining 7 years ago! The instructor gives examples that he made personally, explains all of the coding thoroughly, and shows you vast libraries to source pre-made objects, characters, and worlds... what more could you ask for!?!"

• You want to learn to create 3D games that will run in a modern browser, even on mobile devices.
• You want to learn the skills quickly.
• You want to focus on a game that has a central in-vision character.
• You want to learn to control 3D assets with code.

• You need to be keen to learn to code your own 3D games.

• We’ll be using Brackets as the text editor. But feel free to use your preferred editor if you like to use a different one.

• Some knowledge of JavaScript will help.

• Game will run in a browser, but you need to use a web server. Setting this up simply is described in section 1.

Currently there are no Q&As for this course. Be the first to ask a question.

Reed courses certificate of completion

Digital certificate - Included